<template>
  <right-template :title="componentData.title" :tabName="componentData.tabName">
    <el-form v-if="componentData.cid == COMPONENT_TYPES.group_component">
      <input-normal label="修改组件类型" v-model="componentData.cid"  @change="onChangeAttrType"></input-normal>
      <template v-if="isLong">
        <switch-normal v-model="commonAttr.isFullScreen" label="全屏" @change="onChangeAttr"></switch-normal>
        <template v-if="commonAttr.isFullScreen">
          <color-normal v-model="commonAttr.bgColor" label="背景颜色" format="rgb" @change="onChangeAttr"></color-normal>
          <input-normal label="背景图片" v-model="commonAttr.bgUrl" @change="onChangeAttr"></input-normal>
        </template>
      </template>
      <input-normal label="距离顶部位置" v-model="conAttr.realTop" unit="Y" @change="onChangePosition"></input-normal>
      <input-normal label="另一个组件高度" v-model="conAttr.otherCompHeight" unit="Y" @change="onChangePosition"></input-normal>
      <switch-normal v-model="commonAttr.isDisplayY" label="显示Y轴滚动条" @change="onChangeAttr"></switch-normal>
      <dropdown-normal v-if="commonAttr.isDisplayY" label="滚动条颜色" :valLists="SCROLLBER_TYPE" v-model="commonAttr.scrollbarType" @change="onChangeAttr"></dropdown-normal>
      
      <switch-normal v-model="commonAttr.isPercent" label="y轴百分比" @change="onChangeAttr"></switch-normal>
      <input-normal label="x百分比" v-model="commonAttr.leftPercent" @change="onChangeAttr"></input-normal>
      <input-normal label="左边距" v-model="commonAttr.marginLeft" @change="onChangeAttr"></input-normal>
      <input-normal label="截图背景" v-model="commonAttr.bgUrl" @change="onChangeAttr"></input-normal>
      <dropdown-normal label="脚本类名" :valLists="INJECT_GROUP_CLASS_NAMES" v-model="commonAttr.injectJsClass" @change="onChangeAttr"></dropdown-normal>
      <input-normal label="脚本类名" v-model="commonAttr.injectJsClass" placeholder="ClickGetCard" @change="onChangeAttr"></input-normal>
      <textarea-normal v-if="commonAttr.injectJsClass" label="脚本类参数" v-model="commonAttr.injectJsClassParams" @change="onChangeAttr"></textarea-normal>
    </el-form>
    <p v-else class="margin-left-right-16 margin-top-bottom-10">无UI属性配置，请在事件UI中设置</p>
  </right-template>
</template>

<script>
  import RightTemplate from '@/views/child/right/right-template.vue'
  import InputNormal from '@/views/components/edit/InputNormal.vue'
  import TextareaNormal from '@/views/components/edit/TextareaNormal.vue'
  import SwitchNormal from '@/views/components/edit/SwitchNormal.vue'
  import SliderNormal from '@/views/components/edit/SliderNormal.vue'
  import DropdownNormal from '@/views/components/edit/DropdownNormal.vue'
  import ColorNormal from '@/views/components/edit/ColorNormal.vue'

  import { mapState, mapActions } from 'vuex'
  import { editUtils } from '@/views/js/edit-utils'
  import { PLACEHOLDER, COMPONENT_TYPES } from '@/common/const-wb'
  import { INJECT_GROUP_CLASS_NAMES } from '@/common/const-inject-class'
  import { GSAP_FROM_TYPES, GSAP_EASE_TYPES, GSAP_AXIS_TYPES, GSAP_EASE_INOUT_TYPES, SCROLL_TRIGGER_TYPE, SCROLL_TRIGGER_TYPE_MAP } from '@/common/const-animates';
  import GROUP_PLACEHOLDER from '@/common/const-group'
  export default {
    name: "RightWb",
    mixins: [editUtils],
    setup () {
      return {
        COMPONENT_TYPES: COMPONENT_TYPES,
        GSAP_FROM_TYPES: GSAP_FROM_TYPES,
        GSAP_EASE_TYPES: GSAP_EASE_TYPES,
        GSAP_EASE_INOUT_TYPES: GSAP_EASE_INOUT_TYPES,
        GSAP_AXIS_TYPES: GSAP_AXIS_TYPES,
        SCROLL_TRIGGER_TYPE: SCROLL_TRIGGER_TYPE,
        SCROLL_TRIGGER_TYPE_MAP: SCROLL_TRIGGER_TYPE_MAP,
        PLACEHOLDER: PLACEHOLDER,
        INJECT_GROUP_CLASS_NAMES: INJECT_GROUP_CLASS_NAMES,
        isDebug: process.env.NODE_ENV === 'production' ? false : true,
        GROUP_PLACEHOLDER
      }
    },
    components: {
      RightTemplate,
      InputNormal,
      TextareaNormal,
      SwitchNormal,
      SliderNormal,
      DropdownNormal,
      ColorNormal,
    },
    computed: {
      ...mapState({
        conAttr: (state) => _.cloneDeep(state.components.currentComponentData.conAttr),
        componentData: (state) => _.cloneDeep(state.components.currentComponentData),
      }),
    },
    methods: {
      ...mapActions({
        recordMousePosition: "components/recordMousePosition",
      }),
      onChangePosition() {
        let realTop = parseInt(this.conAttr.realTop)
        let left = parseInt(this.conAttr.left)
        let top = parseInt(this.conAttr.top)
        let otherCompHeight = parseInt(this.conAttr.otherCompHeight)
        this.recordMousePosition({ left, top, realTop, otherCompHeight })
      },
    },
  };
</script>